<template>
  <div class="container lawyer-list pb">
    <p class="bread">
      <a href="#/">首页</a> >
      <a href="javascript:void(0);" class="font-s-18">法律服务</a>
    </p>
    <div class="fix">
      <div class="flo-left container-left">
        <div class="retrieval-box bg-c-fff">
          <p><span>所在地区：</span>
            <address-select ref="addressData" :isActive="isActive" @addressChanged="getLawyerData(1)"></address-select>
          </p>
          <choose-type typename="律师性别" valuename="sixType" :itemlist="sixlist" :active="sixActive" @typechanged="onOptionChanged"></choose-type>
          <choose-type typename="执业年限" valuename="yearType" :itemlist="yearlist" :active="yearActive" @typechanged="onOptionChanged"></choose-type>
          <p><span>擅长领域：</span>
            <field ref="fieldData" @addressChanged="getLawyerData(1)"></field>
          </p>
        </div>
        <div class="lawyer-list">
          <div class="bg-c-fff fix mb20" v-for="item in lawyerList">
            <div class="flo-left lawyer-img">
              <img :src="item.lawyerPic" alt="">
            </div>
            <div class="flo-left lawyer-data">
              <h3>{{item.lawyerName}}<span>律师（{{item.lawyerSex|sexfilter}}）</span></h3>
              <p><i class="iconfont icon-dizhi-copy"></i><span>{{item.address}}</span>| <span>{{item.firmName}}</span> </p>
              <p><i class="iconfont icon-shijian"></i><span>执业年限：{{item.careerYear}}</span> </p>
              <p><i class="iconfont icon-dianzan3"></i>擅长领域：<span>{{item.field | fieldFilter}}</span></p>
            </div>
            <div class="flo-right lawyer-btn">
              <button class="blue-button mb20 small-btn-css" @click="onContactShow(item.id)">联系律师</button>
              <button class="blue-button small-btn-css" @click="onDetailsClick(item.id)">查看详情</button>
            </div>
          </div>
        </div>
        <pagination :index="pageIndex" :total="pageTotal" v-show="this.lawyerList!=0" @pagechange="onPageChange"></pagination>
      </div>
      <div class="flo-right container-right">
        <div class="lawyer-rec-button bg-c-fff mb20">
          <p>若您没有找到满意的律师，请留下联系方式，专家将与您取得联系并免费为您推荐律师。</p>
          <button @click="onSubmitShow" class="blue-button auto small-btn-css">专家推荐</button>
        </div>
        <div class="lawyer-notice">
          <h3>法律声明</h3>
          <p>法律服务依托信宝遍布全国的合作律师资源及自主开发并投入运行的服务监控系统，线上线下相融合，及时提供专业的、全面的、务实的法律及商务解决方案。用户通过本服务可以获得各类专业律师免费信息，与专业律师进行咨询和沟通。信宝有专门团队免费为用户对律师提供的服务进行全程监控。用户要求进行服务监控的，将律师服务费转至信宝公司监管，在律师提供完善的法律服务后将律师服务费付给律师，确保服务质量，及时制止律师任何损害用户利益的行为，切实守护用户的信任。</p>
        </div>
      </div>
    </div>
    <vodal :show="contactShow" animation="zoom" :width="400" :height="240" @hide="contactShow = false">
      <div class="vodal-dzbox">
        <h2>联系律师</h2>
        <div class="contact-con con">
          <p>您可以与律师取得联系，进一步沟通详细需求。</p>
          <p>联系电话：{{phone}}</p>
        </div>
      </div>
      <div class="tc auto vodal-box">
        <button class="blue-button small-btn-css" @click="contactShow = false">确认</button>
        <button class="white-button small-btn-css" @click="contactShow = false">取消</button>
      </div>
    </vodal>
    <vodal :show="submitShow" animation="zoom" :width="372" :height="370" @hide="submitShow = false">
      <div class="vodal-dzbox">
        <h2>专家推荐，请留下联系方式</h2>
        <div class="con">
          <form @submit.prevent="onSubmit">
            <ul>
              <li>姓名：
                <input type="text" placeholder="请输入您的姓名" class="input-css" v-model="customName">
              </li>
              <li>电话：
                <input type="text" placeholder="请输入您的电话" class="input-css" v-model="customPhone">
              </li>
              <li>邮箱：
                <input type="text" placeholder="请输入您的邮箱" class="input-css" v-model="customEmail">
              </li>
              <li>备注：
                <textarea class="vt" v-model="customRemark"></textarea>
              </li>
              <li class="vodal-box auto tc">
                <button type="submit" class="blue-button small-btn-css dib">确认</button>
                <button type="button" class="white-button small-btn-css dib" @click="submitShow = false">取消</button>
              </li>
            </ul>
          </form>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import AddressSelect from '../components/Address/Address'
import Field from '../components/Field/Field.vue'
import Pagination from '../components/Pagination'
import LawyerVodal from '../components/LawyerVodal'
import ChooseType from '../components/ChooseType'
export default {
  components: {
    AddressSelect,
    Field,
    Pagination,
    LawyerVodal,
    ChooseType
  },
  data() {
    return {
      pageIndex: 1,
      pageTotal: 0,
      lawyerList: [],
      fieldList: [],
      field: [],
      preAress: '',
      isActive: false,
      contactShow: false,
      submitShow: false,
      phone: '',
      sixActive: '',
      sixlist: [{
        value: '',
        text: '全部'
      }, {
        value: '0',
        text: '男'
      }, {
        value: '1',
        text: '女'
      }],
      yearActive: '',
      yearlist: [{
        value: '',
        text: '全部'
      }, {
        value: '1-3年',
        text: '1-3年'
      }, {
        value: '3-5年',
        text: '3-5年'
      }, {
        value: '5年以上',
        text: '5年以上'
      }],
      customName: '',
      customPhone: '',
      customEmail: '',
      customRemark: ''
    }
  },
  mounted() {
    this.onPageChange(1)
  },
  methods: {
    onOptionChanged(type, value) {
      if (type === 'sixType') {
        this.sixActive = value
      }
      if (type === 'yearType') {
        this.yearActive = value
      }
      this.getLawyerData(1)
    },
    getLawyerData(n) {
      if (this.$refs.addressData.province === '' && this.$refs.addressData.state === '' && this.$refs.addressData.area === '') {
        this.preAress = ''
      }
      if (this.$refs.addressData.province && this.$refs.addressData.state === '') {
        this.preAress = this.$refs.addressData.province
      }
      if (this.$refs.addressData.province && this.$refs.addressData.state && this.$refs.addressData.area === '') {
        this.preAress = this.$refs.addressData.province + ',' + this.$refs.addressData.state
      }
      if (this.$refs.addressData.province && this.$refs.addressData.state && this.$refs.addressData.area) {
        this.preAress = this.$refs.addressData.province + ',' + this.$refs.addressData.state + ',' + this.$refs.addressData.area
      }
      var parms = {
        lawyerSex: this.sixActive,
        field: this.$refs.fieldData.classA + ',' + this.$refs.fieldData.classB,
        address: this.preAress,
        careerYear: this.yearActive,
        page: n,
        rows: 10
      }
      this.$http.get('/member/getList/revieweded/lawyer', {
        params: parms
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.pageIndex = n
          this.pageTotal = Math.ceil(data.data.total / 10)
          this.lawyerList = data.data.rows
          // console.log(this.lawyerList)
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onPageChange(n) {
      this.getLawyerData(n)
    },
    onContactShow(id) {
      if (!this.$store.state.isLogin) {
        this.$toasted.show('请先登录')
        return
      }
      this.contactShow = true
      this.$http.get('/member/query/lawyer/detail', {
        params: {
          id: id
        }
      }).then(data => {
        if (data.data.httpCode === 200) {
          // console.log(data.data.data)
          this.phone = data.data.data.registPhone
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onSubmitShow() {
      this.submitShow = true
    },
    onDetailsClick(id) {
      if (!this.$store.state.isLogin) {
        this.$toasted.show('请先登录')
        return
      }
      this.$router.push('/lawyerdetails' + '?id=' + id)
    },
    onSubmit() {
      var nameReg = /^[\u4E00-\u9FA5A-Za-z]+$/
      if (!this.customName) {
        this.$toasted.show('请填写您的姓名')
        return
      }
      if (!nameReg.test(this.customName)) {
        this.$toasted.show('请填写中/英文姓名')
        return
      }
      var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(16[0-9]{1}))+\d{8})$/
      if (!this.customPhone) {
        this.$toasted.show('请填写您的手机号码')
        return
      }
      if (!phoneReg.test(this.customPhone)) {
        this.$toasted.show('请输入有效地手机号码')
        return
      }
      if (!this.customEmail) {
        this.$toasted.show('请填写您的邮箱')
        return
      }
      var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!emailReg.test(this.customEmail)) {
        this.$toasted.show('请输入有效地邮箱')
        return
      }
      this.$http.post('/expertGroom/submit', {
        customName: this.customName,
        customPhone: this.customPhone,
        customEmail: this.customEmail,
        customRemark: this.customRemark
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('发送成功，请您稍等，我们会尽快与您联系！')
          this.submitShow = false
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        this.$toasted.show(err)
        console.log(err)
      })
    }
  },
  filters: {
    sexfilter(s) {
      if (s === 0) {
        return '男'
      }
      if (s === 1) {
        return '女'
      }
    },
    fieldFilter(f) {
      let fieldCon = []
      f.split(';').forEach((i) => {
        fieldCon.push(i.split(',')[1])
      })
      return fieldCon.join(' ')
    }
  }
}

</script>
<style type="text/css" scoped>
.retrieval-box {
  padding: 30px 40px;
  line-height: 30px;
  margin-bottom: 20px;
}

.pb {
  padding-bottom: 70px;
}

.container-left {
  width: 950px;
  margin-right: 20px;
}

.container-right {
  width: 230px;
}

.retrieval-box p {
  margin: 10px 0;
}

.retrieval-box span {
  color: #01378c;
  font-weight: bold;
  margin-right: 16px;
}

select {
  background-color: #d8e7ff;
  border: none;
  height: 30px;
  line-height: 30px;
  width: 90px;
}

.lawyer-data {
  margin-left: 40px;
  color: #282828;
}

.lawyer-data img {
  width: 180px;
  height: 180px;
}

.lawyer-data h3 {
  font-weight: bold;
  font-size: 18px;
  line-height: 48px;
  margin-top: 10px;
}

.lawyer-data h3 span {
  font-weight: normal;
  font-size: 16px;
  margin-left: 10px;
}

.lawyer-data p {
  line-height: 36px;
}

.lawyer-data p i {
  color: #7a7a7a;
  margin-right: 8px;
}

.lawyer-data p span {
  padding: 0 8px;
  margin-left: -5px;
}

.lawyer-btn {
  margin-right: 40px;
}

.lawyer-list .lawyer-btn {
  margin-top: 65px;
  width: 152px;
}

.lawyer-btn a {
  margin-bottom: 20px;
}

.lawyer-rec-button {
  padding: 33px 21px;
  color: #818181;
}

.lawyer-rec-button p {
  line-height: 31px;
}

.lawyer-rec-button .blue-button {
  margin-top: 35px;
}

.lawyer-notice {
  padding: 10px 20px;
  background: url(../assets/dian_03.jpg) center no-repeat;
  color: #818181;
  line-height: 30px;
  height: 780px;
}

.lawyer-notice h3 {
  font-size: 18px;
  color: #01378c;
  line-height: 42px;
}

.vodal-box button {
  margin: 0 20px;
}

.lawyer-img {
  width: 180px;
  height: 180px;
}

.lawyer-img img {
  height: 100%;
  max-width: 100%;
}

</style>
<style type="text/css">
.vodal-dialog {
  padding: 0;
}

.vodal-close {
  top: 12px;
}

.vodal-close:before,
.vodal-close:after {
  background: #01378c;
  border-radius: 0;
}

h2 {
  background-color: #d8e7ff;
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  text-indent: 40px;
}

.vodal-dzbox .con {
  padding: 0 20px;
  margin: 30px 20px;
}


.vodal-dzbox textarea {
  height: 60px;
  border: 1px solid #ddd;
  width: 240px;
  padding: 6px 10px;
  line-height: 20px;
}

.vodal-dzbox .con li {
  margin: 15px 0;
}

vodal-dzbox .con input {
  width: 240px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
}

.vodal-dzbox .contact-con p {
  margin-bottom: 30px;
}

</style>
